<template>
  <div class="app">
    <!-- 头部 -->
    <HmHeader></HmHeader>
    <!-- 中间内容 -->
    <HmMain></HmMain>
    <!-- 尾部 -->
    <HmFooter></HmFooter>

    <!-- 
      trigger on tab
     -->
  </div>
</template>

<script>
// 引入组件 --> 局部注册组件 --> 使用组件

// 1. 引入组件
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'

export default {
  // 2. 局部注册
  components: {
    HmHeader: HmHeader,
    HmMain,
    HmFooter
  }
}
</script>

<style>
 .app {
   width: 400px;
   height: 600px;
   background-color: #87ceeb;
   padding: 10px;
 }
</style>